<template>
  <div class="page">
    <sub-header :title="title" right-text="保存" @submit="submit"></sub-header>
    <div class='main'>
      <ul class='head'>
        <li>头像</li>
        <li><img :src="showHead" alt=""/><input ref="headfile" type="file" @change="uploadHead"/></li>
      </ul>
      <ul class='list'>
        <li>昵称</li>
        <li><input type="text" placeholder="请设置昵称" v-model="nickname"/></li>
        <li class='arrow'></li>
      </ul>
      <ul class='list'>
        <li>性别</li>
        <li><input type="text" placeholder="请选择性别" :value="showGender" readonly @click="isGender=true"/></li>
        <li class='arrow'></li>
      </ul>
    </div>
    <van-action-sheet
      v-model="isGender"
      :actions="genders"
      :round="false"
      cancel-text="取消"
      title="请选择性别"
      @select="selectGender"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { userData, uploadHeaderData, updateUserData } from 'api/user'
import SubHeader from 'components/SubHeader'

export default {
  name: 'profile',
  data () {
    return {
      title: this.$route.meta.title,
      showHead: require('assets/images/user/my/default-head.png'),
      head: '',
      nickname: '',
      showGender: '',
      isGender: false,
      gender: '0',
      genders: [{ name: '男', value: 1 }, { name: '女', value: 2 }]
    }
  },
  computed: {
    ...mapState({
      uid: state => state.user.uid
    }),
  },
  methods: {
    selectGender (selected) {
      this.showGender = selected.name
      this.gender = selected.value
      this.isGender = false
    },
    uploadHead (e) {
      if (e.target.files[0]) {
        uploadHeaderData({ headfile: e.target.files[0] }).then(res => {
          if (res.code === 200) {
            let preurl = '//sp.webxuewen.cn'
            if (process.env.NODE_ENV === 'development') {
              preurl = '//vueshop.glbuys.com'
            }
            this.showHead = preurl + '/userfiles/head/' + res.data.msbox
            this.head = res.data.msbox
          }
        })
      }
    },
    submit () {
      if (this.nickname.match(/^\s*$/)) {
        this.$toast('请输入昵称')
        return
      }
      if (this.gender === '0') {
        this.$toast('请选择性别')
        return
      }
      if (this.isSubmit) {
        this.isSubmit = false
        updateUserData({
          uid: this.uid,
          nickname: this.nickname,
          gender: this.gender,
          head: this.head
        }).then(res => {
          if (res.code === 200) {
            this.$toast({
              message: '保存成功',
              duration: 2000,
              onClose: () => {
                this.$router.go(-1)
              }
            })
          } else {
            this.$toast(res.data)
          }
        })
      }
    }
  },
  created () {

    userData(this.uid).then(res => {
      if (res.code === 200) {
        this.nickname = res.data.nickname
        if (res.data.head !== '') {
          this.showHead = res.data.head
        }
        if (res.data.gender === '1') {
          this.showGender = '男'
        } else if (this.showGender === '2') {
          this.showGender = '女'
        } else {
          this.showGender = ''
        }
        this.gender = res.data.gender
      }
    })
    this.isSubmit = true
    document.title = this.title
  },
  components: {
    SubHeader
  }
}

</script>

<style scoped>
  .page {
    width: 100%;
    height: 100vh;
    background-color: #FFFFFF;
    overflow: hidden;
  }

  .main {
    width: 100%;
    margin-top: 1.02rem;
  }

  .main ul.head {
    width: 100%;
    height: 1.2rem;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }

  .main ul.head li:nth-child(1) {
    font-size: 0.28rem;
    margin-left: 5%;
  }

  .main ul.head li:nth-child(2) {
    width: 1rem;
    height: 1rem;
    margin-right: 10%;
    position: relative;
    z-index: 1;
  }

  .main ul.head li:nth-child(2) img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
  }

  .main ul.head li:nth-child(2) input {
    width: 100%;
    height: 95%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .main ul.list {
    width: 100%;
    height: 0.8rem;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    font-size: 0.28rem;
  }

  .main ul.list li:nth-child(1) {
    margin-left: 5%;
  }

  .main ul.list li:nth-child(2) {
    width: 50%;
    height: 100%;
    margin-left: 20%;
  }

  .main ul.list li:nth-child(2) input {
    width: 100%;
    height: 95%;
    text-align: right;
    font-size: 0.28rem;
  }

  .main ul.list li.arrow {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url("../../../assets/images/common/right_arrow.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 3%;
  }
</style>
